<template>
	<view class="my-page">
    <view style="width: 100vw;height: 800rpx;position: fixed;left: 0;top: 0;z-index: 0;background: linear-gradient(180deg, #79B0F7 0%, #F2F8FF 76.34%, #FFFFFF 100%);
backdrop-filter: blur(8px);">
      <image style="width: 100%;height: 100%;position:relative;z-index: 1" src="/static/image/mine_bg.png"></image>
    </view>
    <view class="my-info" :style="{paddingTop:statusBarHeight+'px'}" @click="handleUser">
      <image style="width: 128rpx;height: 128rpx;margin-bottom: 24rpx" :src="userInfo.avatar_url || '/static/default_user.png'"></image>
      <view class="username">{{ userInfo.name || '去登录' }}</view>
    </view>
    <view class="my-content">
      <view class="my-cell">
        <view class="cell-item" v-for="item in cellList1" :key="item.name" @click="toPage(item)">
          <view class="cell-item-left">
            <image :src="item.src"></image>
            <view class="cell-item-name">{{ item.name }}</view>
          </view>
          <image src="arrow-right" style="width: 16rpx;height: 28rpx"></image>
        </view>
      </view>
    </view>

    <view class="logout-btn" v-if="userInfo.id" @click="logout">
      退出登录
    </view>
  </view>
</template>

<script>
	import Navbar from "../../components/Navbar.vue";

  export default {
    components: {Navbar},
		data() {
			return {
        current: 4,
        showDetail: false,
        statusBarHeight: 0,
        cellList1: [

        ],
			}
		},
    onLoad() {
      //获取手机系统的信息 里面有状态栏高度和设备型号
      let {
        statusBarHeight,
        system
      } = uni.getSystemInfoSync()
      // 注意返回的单位是px 不是rpx
      console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
      // 这个高度刚好和胶囊对齐
      this.statusBarHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
    },
    onShow() {
      this.$store.dispatch('getUserInfo')
    },
		methods: {
      handleUser() {
        if (this.userInfo.id) {

        } else {
          this.$goPage({
            url: '/pages/login/login'
          })
        }
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '确定要退出登录吗？',
          // 文本颜色
          color: '#333333',
          // 取消按钮的文字颜色
          cancelColor: '#D43030',
          // 确认按钮的文字颜色
          confirmColor: '#333333',
          success: (res) => {
            if (res.confirm) {
              let role = this.role
              this.$store.commit('LOGOUT')
              setTimeout(() => {
                if (role === 0) {
                  uni.reLaunch({
                    url: '/pages/login/login'
                  })
                } else {
                  uni.reLaunch({
                    url: '/pages/login/login1'
                  })
                }
              },500)
            }
          }
        })
      },
      toPage(item) {
        if (!item.url) {
          this.showDetail = true
          return
        }
        this.$goPage({
          url: item.url,
          needLogin: item.needLogin
        })
      }
		}
	}
</script>

<style lang="scss">
.my-page {
  height: 100vh;
  overflow: hidden;
  touch-action: none;
  background: #F5F5F5;
  .detail-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .detail-popup {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      .btn-group {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        bottom: 112rpx;
      }
      .detail-img {
        width: 630rpx;
        height: 603rpx;
      }
      .qq-btn,
      .we-btn{
        margin: 0 auto;
        width: 512rpx;
        height: 78rpx;
        text-align: center;
        line-height: 78rpx;
        border-radius: 612px;
        background: #FFC300;
        font-size: 32rpx;
        font-weight: 400;
        color: #FFFFFF;
      }
      .we-btn {
        margin-top: 24rpx;
        background: #69C06E;
      }
    }

    .detail-close {
      width: 80rpx;
      height: 80rpx;
      margin-top: 60rpx;
    }
  }
  .logout-btn {
    width: 512rpx;
    height: 94rpx;
    border-radius: 612px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8rpx);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(212, 48, 48, 1);
    line-height: 94rpx;
    text-align: center;
    margin: 23rpx auto;
  }
  .my-content {
    position: relative;
    z-index: 2;
    padding: 38rpx 32rpx;
    padding-top: 0;
    .my-cell {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #FFFFFF;
      backdrop-filter: blur(8px);
      .cell-item {
        display: flex;
        align-items: center;
        padding: 0 28rpx;
        .cell-item-left {
          flex-grow: 1;
          height: 96rpx;
          display: flex;
          align-items: center;
          image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 24rpx;
          }
          .cell-item-name {
            color: #333333;
            font-size: 32rpx;
            font-weight: 400;
          }
        }
      }
    }
  }
  .my-info {
    width: 100vw;
    height: 478rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
  }
}
</style>
